<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h4>测试题</h4>
        <!-- <my-subject></my-subject>
        <my-subject></my-subject>
        <my-subject></my-subject> -->


        <!-- 传入题目编号 
            自定义属性名：全小写 subjectid
        -->

        <my-subject 
        v-for="item in list"
        @subans="hSubAns"
        v-bind:subjectid="item.idx"
        v-bind:key="item.idx"></my-subject>

        <div>
            <span v-for="(item,idx) in list">{{item.idx}} - {{item.ans}}</span>&nbsp;&nbsp;
            <!-- <span>1.正确</span>
            <span>2.正确</span>
            <span>3.正确</span> -->
        </div>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 功能
        // 1. 允许用户自定义题目的个数
        //    预先设置数据，使用v-for对组件循环

        // 2. 子组件内部，随机生成不同的题
        //    补充数据项，并且随机生成10以内的整数
        // 3. 子组件内部，搜集用户的答案
        //    v-model.trim.number
        // 4. 子组件内部，在按钮添加点击事件
        //    向父组件 提交答案
        //    @click, $emit

        // 5. 在父组件中收到事件，
        //    1）在使用子组件时，要传入题号。 父传子。 props
        //    2) 更新自己的数据项


        // 待办：
        ///  1) 只能提一次答案 。思路：提交之后，让按钮不可用。
        ///  2) 样式 。对正确，错误的答案有区别度。

        const vm = new Vue( {
            el: '#app',
            data: {
                list: [
                    {idx:1, ans:'未完成'},
                    {idx:20, ans:'未完成'},
                    {idx:33, ans:'未完成'},
                    {idx:4, ans:'未完成'}
                ]
            },
            components:{
                MySubject: {
                    data () {
                        return {
                            // Math.random()       --> 0-1 的随机数
                            // Math.random() *10   --> 0-10 的随机数,有小数
                            // Math.ceil()             向上取整 1.3 --> 2

                            num1: Math.ceil( Math.random() *10),// 4
                            num2: Math.ceil( Math.random() *10),
                            ans: '' // 用户答案
                        }
                    },
                    props:["subjectid"],
                    template: `
                        <div style="border:1px solid #ccc; width:300px; margin:5px;padding:5px;">
                            <span>{{num1}}</span> + <span>{{num2}}</span> = 
                            <input v-model.trim.number="ans"  style="width:50px;">
                            <button @click="hSubmit">提交</button>
                        </div>
                    `,
                    methods: {
                        hSubmit () {
                            console.log( this.num1,this.num2,this.ans)
                            // 判断是否做对
                            let rs = (this.num1 + this.num2) == this.ans ? '正确' : '错误'

                            // 事件名全小写
                            this.$emit('subans',{idx: this.subjectid , ans: rs})
                        }
                    }
                }
            }
            ,
            methods: {

                // {idx:4, ans:'错误'}
                hSubAns (obj) {
                    //  list: [
                    //     {idx:1, ans:'未完成'},
                    //     {idx:20, ans:'未完成'},
                    //     {idx:33, ans:'未完成'},
                    //     {idx:4, ans:'未完成'}
                    // ]
                    // 1. 找到编号obj.idx的元素
                    // 2. 更新它的ans属性
                    let item = null
                    for(let i = 0; i< this.list.length; i++) {
                        if( this.list[i].idx == obj.idx) {
                            item = this.list[i]
                        }
                    }

                    if(item) {
                        // 找到了,更新它的ans属性
                        item.ans = obj.ans
                    }
                }
            }
        })
    </script>
</body>
</html>